看看这些前端面试题，带你搞定高频知识点（八）-今日视点

let answer;function fn(){//如果此时没有将变量变量提升到这里，answer应该取外层answer的值console.log(answer); //Uncaught ReferenceError: Cannot access "answer" before initializationlet answer=42;}

//变量提升先于函数提升,提升后被函数声明function覆盖,所以就算换了顺序也是functionfunction a(){}var a ;console.log(typeof a); //functionvar f1 = function () {    console.log(1);}function f1 () {    console.log(2);}f1() ; //1//变量提升后var f1;//变量提升function f1(){};//函数提升f1 = function () {    console.log(1);}f1() ;

var a = 10;  function aaa() {    alert(a);}function bbb() {    var a = 20;    aaa();}bbb();

var foo = 1;function bar () {    console.log(foo);    var foo = 10;    console.log(foo);}bar();//变量提升后var foo = 1;function bar () {var foo = undefined;    console.log(foo); //undefined    foo = 10;    console.log(foo);//10}bar();

(function(){  var a = 1;  console.log("内部a:", a);})();

var __const = function __const(data, value) {this.data = value // 把要定义的data挂载到某个对象，并赋值valueObject.defineProperty(this，data, { // 利用Object.defineProperty的能力劫持当前对象，并修改其属性描述符enumerable: false,configurable: false,get: function () {return value},set: function (data) {if (data !== value) { // 当要对当前属性进行赋值时，则抛出错误！throw new TypeError("Assignment to constant variable.")} else {return value}}})}//然后和立即执行函数结合(function(){ var obj = {}_const.call(obj,"a",10)})()//当执行完毕后，全局上就不会有obj，也不会有obj.a这个变量，进而实现了块级作用域的功能

function a(){  a.name ="aaa";  return this.name;}var b = {  a,  name:"bbb",  getName:function(){    return this.name;  }}var c =b.getName;console.log(a()); //this指向window,window上没有name,所以输出undefinedconsole.log(b.a()); //b.a 是function,b调用a函数，所以this指向b，所以输出"bbb"console.log(b.getName);//通过b调用getName，所以getName指向b,所以输出"bbb"console.log(c());//c是function，this指向window，window上没有name,所以输出undefined

//从第二个参数开始依次传入，所以接收时使用rest参数Function.prototype.call=function(obj,...args){obj = obj || window;args = args ? args : [];//给obj新增一个独一无二的属性以免覆盖原有属性    const key = Symbol()obj[key] = this;const res = obj[key](...args);delete obj[key];return res;}

Function.prototype.apply=function(obj,args){obj = obj || window;args = args ? args : [];//给obj新增一个独一无二的属性以免覆盖原有属性    const key = Symbol()obj[key] = this;const res = obj[key](...args);delete obj[key];return res;}

Function.prototype.bind=function(obj,...args){obj = obj || window;args = args ? args : [];return (...args2) => {return this.apply(obj,[...args,...args2])}}

function foo(){var a=2;function bar(){ //覆盖foo()内部作用域的闭包console.log(a++);}return bar;}var bar = foo(); //foo执行创建一个执行上下文环境，由于bar引用了其内部变量，也就是bar持有foo本次执行上下文的引用，foo本次的执行上下文不会被销魂bar();//2bar();//3var fn = foo(); //foo执行创建一个新的执行上下文环境，fn持有了foo本次执行上下文的引用fn();//2

//使用形式，绑定时候throttle函数就会执行,所以this是windowwindow.addEventListener("scroll",throttle(()=>{},500))/*思路需要记录上一次触发的时间，才可以和当前时间比较，是否超过了间隔时间第一次必然立刻触发*/function throttle(callback,wait){let pre = new Date();//这里的this是windowreturn function(...args){//这里的this是绑定的DOMconst now = new Date();if(now-pre>=wait){callback.apply(this,args);pre = now;}}}/*使用setTimeout实现第一次需要延迟delay后触发*/function throttle(callback,delay){let timer = null;//这里的this是windowreturn function(...args){if(timer){//说明已经触发了return;}timer = setTimeout(()=>{callback.apply(this,args);timer = null;},delay)}}

function debounce(callback,delay){let timer = null;//这里的this是windowreturn function(){if(timer){//说明已经触发了clearTimeout(timer);}timer = setTimeout(()=>{callback.apply(this,arguments);timer = null;},delay)}}//立即执行function debounce(func,delay) {  let timeout;  return function (...args) {      if (timeout) clearTimeout(timeout);      const callNow = !timeout;      timeout = setTimeout(() => {          timeout = null;      }, delay)      if (callNow) func.apply(this, args)  }}

//subject 被观察者class Subject {  constructor() {    this.observerList = [];  }  addObserver(observer) {    this.observerList.push(observer);  }  removeObserver(observer) {    const index = this.observerList.findIndex(o => o.name === observer.name);    this.observerList.splice(index, 1);  }  notifyObservers(message) {    const observers = this.observeList;    observers.forEach(observer => observer.notified(message));  }}//Observer 观察者class Observer {  constructor(name, subject) {    this.name = name;    if (subject) {      subject.addObserver(this);    }  }  notified(message) {    console.log(this.name, "got message", message);  }}//使用const subject = new Subject();const observerA = new Observer("observerA", subject);const observerB = new Observer("observerB");subject.addObserver(observerB);subject.notifyObservers("Hello from subject");subject.removeObserver(observerA);subject.notifyObservers("Hello again");

//事件调度中心class PubSub {  constructor() {        // 存储格式: warTask: [], routeTask: []        // {订阅事件:[回调1,回调2...],订阅事件2:[回调1,回调2..]}        this.events = {}     }     // 订阅方法 订阅哪个类型type就把对应的回调函数放入      subscribe(type, cb) {         if (!this.events[type]) {            this.events[type] = [];        }        this.events[type].push(cb);     }     // 发布方法    publish(type, ...args) {        if (this.events[type]) {            this.events[type].forEach(cb => cb(...args))        }    }// 取消订阅方法 的某一个类型的某一个回调    unsubscribe(type, cb) {        if (this.events[type]) {            const cbIndex = this.events[type].findIndex(e=> e === cb)            if (cbIndex != -1) {                this.events[type].splice(cbIndex, 1);            }        }        if (this.events[type].length === 0) {            delete this.events[type];        }    }}//测试let pubsub = new PubSub();//订阅pubsub.subscribe("warTask", function (taskInfo){    console.log("宗门殿发布战斗任务，任务信息:" + taskInfo);})pubsub.subscribe("routeTask", function (taskInfo) {    console.log("宗门殿发布日常任务，任务信息:" + taskInfo);});pubsub.subscribe("allTask", function (taskInfo) {    console.log("宗门殿发布五星任务，任务信息:" + taskInfo);});//发布pubsub.publish("warTask", "猎杀时刻");pubsub.publish("allTask", "猎杀时刻");pubsub.publish("routeTask", "种树浇水");pubsub.publish("allTask", "种树浇水");

//循环引用:b中引用了c，c中又有bobj = {b:["a","f"],c:{h:20}}obj.b.push(obj.c);obj.c.j = obj.b;b:["a","f",{h:20,j:[]}],c:{h:20,j:["a","f",[]]}function deepClone1(target) {    //通过数组创建JSON格式的字符串    let str = JSON.stringify(target);    //将JSON格式的字符串转换为JS数据    let data = JSON.parse(str);    return data;}

//map存放已经拷贝过的对象，key为需要拷贝的对象，value为拷贝后的对象function deepClone(target,map=new Map()){//1.判断是否是引用类型if(typeof target === "object" && target !==null ){if(map.has(target))return map.get(target); //说明已经拷贝过了let isArr = Array.isArray(target);let res = isArr?[]:{};map.set(target,res)if(isArr){//拷贝的是数组target.forEach((item,index) => {res[index] = deepClone(item,map);});}else{//拷贝的是对象Object.keys(target).forEach(key=>{res[key]=deepClone(target[key],map);})} return res; //返回的是一个数组或对象}else{return target;}}//测试console.log(deepClone([1,[1,2,[3,4]]]))